<template>
	<view>
		<!-- 头部 -->
		<order-tab class="order-tab" @change-state="changeState" :start_state="state"></order-tab>
		<view v-if="load_status">
			<!-- 站位 -->
			<view style="height:90upx"></view>
			<!-- 空订单 -->
			<view class='empty-box' v-if="!list.length">
				<image src="https://jyduowei.oss-cn-qingdao.aliyuncs.com/emoty-order.png" mode="widthFix" class="empty-img"></image>
				<view class="empty-msg">您还没有相关订单，快去商城看看吧！</view>
				<view class="empty-btn" @tap="toSee()">
					<cart-btn width="400">去逛一逛</cart-btn>
				</view>
			</view>
			<!-- 订单列表 -->
			<view class="order-list" v-else>
				<view class="order-item" v-for="item in list" @tap="detail(item.id)">
					<!-- 订单排头 -->
					<view class="order-top">
						<text class="order-no"><image src="../../static/image/order/order01-2.png" mode=""></image>订单编号：{{item.out_trade_no}}</text>
						<text class="order-state">
							<text v-if="item.state == 1">待付款</text>
							<text v-if="item.state == 2 && item.after_sales != 1">待发货</text>
							<text v-if="item.state == 3">待收货</text>
							<text v-if="item.state == 4 && item.after_sales !=2 ">已完成</text>
							<text v-if="item.state == 5">已取消</text>
							<text v-if="item.after_sales == 1 ">售后中</text>
							<text v-if="item.after_sales == 2 ">已售后</text>
						</text>
					</view>
					<!-- 订单商品 -->
					<view>
						<template v-for="made_item in item.made">
							<goods-list class="goods_list" :goods_list="setGoodsArr(made_item)" :is_same="made_item.is_same"></goods-list>
						</template>
					</view>
					<!-- 小计 -->
					<view class="list-total">
						<text>共{{item.proNum}}件商品</text>
						<text>合计：</text>
						<text>￥{{item.real_price}}</text>
					</view>
					<!-- 订单操作 -->
					<view class="order-handle" @tap.stop="">
						<text class="order-time">2019-08-20 16:06:12</text>
						<view class="order-btn-box">
							<view class="order-btn order-danger" v-if="item.state == 1" @tap="canlceOrder(item.id)">取消订单</view>
							<view class="order-btn order-danger"  v-if="item.state == 3" @tap="delivery(item.id)">物流跟踪</view>
							<view class="order-btn" v-if="item.state == 1" @tap="toPay(item.id,item.real_price)">去支付</view>
							<view class="order-btn" v-if="item.state == 3" @tap="trueOrder(item.id)">确认收货</view>
							<view class="order-btn order-danger"  v-if="item.state == 5" @click="deleteOrder(item.id)">删除订单</view>
							<view class="order-btn"  v-if="item.state == 4 && item.is_eval == 0" @tap="evalOrder(item.id)">订单评价</view>
						</view>
					</view>
				</view>
				<!-- 弹窗 -->
				<view @tap.stop="">
					<alert @btn-click="btnClick" :dialog="dialog_show" :txt="dialog_txt" :icon="dialog_icon"></alert>
				</view>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view class="goods-model" v-if="loading">
		</view>
		<web-load v-if="loading"></web-load>
	</view>
</template>

<script>
	import webLoad from '../../components/unit/loading.vue';
	import orderTab from '../../components/order/order-tab.vue';
	import cartBtn from '../../components/order/button.vue';
	import goodsList from '../../components/order/goods-list.vue';
	import alert from '../../components/unit/alert.vue';
	
	export default{
		components:{ orderTab , cartBtn , goodsList , alert , webLoad},
		data(){
			return {
				loading:true,
				list : [],
				page : 1,
				last_page : 1,
				state : 0,
				dialog_show : false,
				dialog_style : 0,
				order_id : 0,
				dialog_txt : '您是否确认要取消订单！',
				dialog_icon : 'https://jyduowei.oss-cn-qingdao.aliyuncs.com/order-canlce.png',
				load_status : false
			}
		},
		onShow() {
			this.page = 1;
			this.list = [];
			this.loading=true;
			this.getData();
		},
		onLoad(e) {
			this.state = e.state;
			
		},
		onReachBottom() {
			if(this.page >= this.last_page)return this.toast('暂无更多数据~');
			this.page ++;
			this.getData();
		},
		methods:{
			//模态框按钮事件
			btnClick(e){
				this.dialog_show = false;
				if(e == 0)return false;
				var url = '';
				switch(this.dialog_style){
					case 0:
					url = 'order/canlceOrder';
					break;
					case 1:
					url = 'order/deleteOrder';
					break;
				}
				this.ajax(url,{
					data:{id : this.order_id},
					success:(res) =>{
						if(res.code) {
							this.list = [];
							this.page = 1;
							this.loading =true
							this.getData();
						}
						this.toast(res.msg);
						// this.loading= false;
					}
				})
			},
			//获取订单列表  获取订单信息
			getData(){
				this.ajax('order/orderList',{
					data:{state : this.state , page : this.page,phone:1},
					success:(res) =>{
						var allNum = res.msg.data 
						allNum.forEach(function(item) {
							var total_num = 0
							item.made.forEach(function(items) {
								total_num += items.goods_num
							})
							item.proNum = total_num
						});
						// console.log(this.list)
						this.page = res.msg.current_page;
						this.last_page = res.msg.last_page;
						for(var i in res.msg.data) {
							this.list.push(res.msg.data[i]);
						}
						
						this.load_status = true;
						this.loading=false;
					}
				});
			},
			//切换订单状态
			changeState(e){
				if(this.state == e)return false;
				this.load_status =false;
				this.list = [];
				this.page = 1;
				this.state = e;
				console.log(e);
				this.getData();
			},
			//去逛一逛
			toSee(){
				uni.switchTab({
					url:"/pages/index/homePage"
				})
			},
			//订单详情
			detail(id){
				uni.navigateTo({
					url:'/pages/order/detail?order_id='+id
				})
			},
			setGoodsArr(data){
				var list = [];
				for(var i in data.made_info) {
					list.push(data);
				}
				return list;
			},
			//取消订单
			canlceOrder(id){
				this.dialog_txt = '您是否确认要取消订单！';
				this.dialog_show = true;
				this.dialog_style = 0;
				this.order_id = id;
			},
			//删除订单
			deleteOrder(id){
				this.dialog_txt = '您是否确认要删除订单！';
				this.dialog_show = true;
				this.dialog_style = 1;
				this.order_id = id;
			},
			//查看物流
			delivery(id){
				uni.navigateTo({
					url:'/pages/order/delivery?order_id='+id
				})
			},
			//确认收货
			trueOrder(id){
				this.ajax('order/trueOrder',{
					data:{id:id},
					success:(res) => {
						this.toast(res.msg);
						if(res.code) {
							setTimeout(()=>{
								this.list = [];
								this.page = 1;
								this.loading = true;
								this.getData();
							},1000)
						}
					}
				});
			},
			//订单评价
			evalOrder(id){
				uni.navigateTo({
					url:'/pages/order/eval?order_id='+id
				})
			},
			//去支付
			toPay(id,real_price){
				uni.navigateTo({
					url:'/pages/order/pay?order_id='+id+'&order_price='+real_price
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F9F9F9;
	}
	.empty-box::before{content: '';display: table;}
	.empty-img{width: 200upx;height: 200upx;display: block;margin:auto;margin-top:30%}
	.empty-msg{text-align: center;color:#999999;margin-top:60upx;}
	.empty-btn{margin-top:50upx}
	.order-list{padding-bottom: 20upx;  }
	.order-item{
		background-color: #FFFFFF;
		width: 100%;
		border-top: 10upx solid #F9F9F9;}
	.order-item:first-child {
		border-top: 0;
	}
	.goods_list {
	border-top: 6upx solid #F9F9F9;
	}
	.order-top{
		overflow: hidden;
		height:80upx;line-height:80upx;
		box-sizing: border-box;
		padding:0 20upx;
		.order-no {
			color: #333333;
			font-size: 28upx;
			image{
				width: 24upx;	
				height: 26upx;
				vertical-align: middle;
				margin-right: 10upx;
				margin-top: -4upx;
			}
		}
		}
	.order-state{float: right;font-size: 32upx;font-weight: bold;}
	.order-no{color:#c1c1c1;float: left;}
	.order-handle{overflow: hidden;height:140upx;line-height: 140upx;box-sizing: border-box;padding:0 20upx;
		
	}
	// .order-tab {
	// 	border-bottom: 2upx solid #E1E1E1;
	// }
	.order-time{font-size: 26upx;color:#c1c1c1}
	.order-btn-box{float: right;}
	.order-btn{
		display: inline-block;
		margin-left: 20upx;
		width: 164upx;
		height: 64upx;
		line-height: 64upx;
		border-radius: 5upx;
		text-align: center;
		box-sizing: border-box;
		font-size:32upx;
		color: #FFFFFF;
		// font-size: 32upx;
		background-color: #333;
		}
	.order-danger{border-color: #e1e1e1;color:#999}
	.list-total{border-bottom: 1upx solid #F1F1F1;
				padding-bottom: 20upx ;text-align: right;
				width: calc(100% - 40upx);margin: auto;color:#999;
				font-size: 32upx;}
	.list-total > text:first-child{margin-right: 20upx;}
	.list-total > text:last-child{color:#000;font-weight: bold;font-family: 'OTF';font-size: 40upx;}
	.goods-model{
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		height:100%;
		background: #fff;
		z-index:9;
	}
	
	.order-danger{
		border-color: #e1e1e1;
		color:#FFFFFF; 
		background-color: #E1E1E1; 
		}
</style>
